<?php
/**
 * WooCommerce Single Product Template
 * 单个商品详情页面模板，基于HTML模板 product-template.html
 * 
 * @package WP Bootstrap Woo
 */

defined('ABSPATH') || exit;

get_header(); ?>

<!-- breadcrumb start -->
<section class="breadcrumb-area">
    <div class="container">
        <div class="col">
            <div class="row">
                <div class="breadcrumb-index">
                    <?php woocommerce_breadcrumb(); ?>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- breadcrumb end -->

<!-- product-template start -->
<section class="single-product">
    <div class="container">
        <?php while (have_posts()) : the_post(); ?>
            
            <?php global $product; ?>
            
            <div class="single-product-area">
                <div class="row">
                    <!-- product images -->
                    <div class="col-12 col-lg-6 col-md-6">
                        <div class="single-product-img">
                            <div class="product-img-main">
                                <div class="product-img-slider owl-carousel owl-theme">
                                    <?php
                                    $attachment_ids = $product->get_gallery_image_ids();
                                    $main_image_id = $product->get_image_id();
                                    
                                    // 主图片
                                    if ($main_image_id) {
                                        $main_image_url = wp_get_attachment_image_url($main_image_id, 'full');
                                        echo '<div class="product-img-item">';
                                        echo '<img src="' . esc_url($main_image_url) . '" class="img-fluid" alt="' . esc_attr($product->get_name()) . '">';
                                        echo '</div>';
                                    }
                                    
                                    // 画廊图片
                                    if ($attachment_ids) {
                                        foreach ($attachment_ids as $attachment_id) {
                                            $image_url = wp_get_attachment_image_url($attachment_id, 'full');
                                            echo '<div class="product-img-item">';
                                            echo '<img src="' . esc_url($image_url) . '" class="img-fluid" alt="' . esc_attr($product->get_name()) . '">';
                                            echo '</div>';
                                        }
                                    }
                                    ?>
                                </div>
                            </div>
                            
                            <!-- thumbnail images -->
                            <div class="product-img-thumb">
                                <div class="product-thumb-slider owl-carousel owl-theme">
                                    <?php
                                    // 主图片缩略图
                                    if ($main_image_id) {
                                        $thumb_url = wp_get_attachment_image_url($main_image_id, 'thumbnail');
                                        echo '<div class="product-thumb-item">';
                                        echo '<img src="' . esc_url($thumb_url) . '" class="img-fluid" alt="' . esc_attr($product->get_name()) . '">';
                                        echo '</div>';
                                    }
                                    
                                    // 画廊缩略图
                                    if ($attachment_ids) {
                                        foreach ($attachment_ids as $attachment_id) {
                                            $thumb_url = wp_get_attachment_image_url($attachment_id, 'thumbnail');
                                            echo '<div class="product-thumb-item">';
                                            echo '<img src="' . esc_url($thumb_url) . '" class="img-fluid" alt="' . esc_attr($product->get_name()) . '">';
                                            echo '</div>';
                                        }
                                    }
                                    ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- product info -->
                    <div class="col-12 col-lg-6 col-md-6">
                        <div class="single-product-content">
                            <div class="product-info">
                                <h1 class="product-title"><?php the_title(); ?></h1>
                                
                                <!-- rating -->
                                <div class="product-rating">
                                    <?php woocommerce_template_single_rating(); ?>
                                </div>
                                
                                <!-- price -->
                                <div class="product-price">
                                    <?php woocommerce_template_single_price(); ?>
                                </div>
                                
                                <!-- short description -->
                                <div class="product-short-description">
                                    <?php woocommerce_template_single_excerpt(); ?>
                                </div>
                                
                                <!-- product options and add to cart -->
                                <div class="product-options">
                                    <?php woocommerce_template_single_add_to_cart(); ?>
                                </div>
                                
                                <!-- product meta -->
                                <div class="product-meta">
                                    <?php woocommerce_template_single_meta(); ?>
                                </div>
                                
                                <!-- social sharing -->
                                <div class="product-sharing">
                                    <h6>Share this product:</h6>
                                    <div class="social-share">
                                        <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" target="_blank" class="share-facebook">
                                            <i class="feather-facebook"></i>
                                        </a>
                                        <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>" target="_blank" class="share-twitter">
                                            <i class="feather-twitter"></i>
                                        </a>
                                        <a href="https://www.pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink()); ?>&description=<?php echo urlencode(get_the_title()); ?>" target="_blank" class="share-pinterest">
                                            <i class="feather-instagram"></i>
                                        </a>
                                        <a href="mailto:?subject=<?php echo urlencode(get_the_title()); ?>&body=<?php echo urlencode(get_permalink()); ?>" class="share-email">
                                            <i class="feather-mail"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- product tabs -->
            <div class="product-tabs-area">
                <div class="row">
                    <div class="col-12">
                        <div class="product-tabs">
                            <ul class="nav nav-tabs" id="productTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab">
                                        Description
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="additional-tab" data-bs-toggle="tab" data-bs-target="#additional" type="button" role="tab">
                                        Additional Information
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab">
                                        Reviews (<?php echo $product->get_review_count(); ?>)
                                    </button>
                                </li>
                            </ul>
                            
                            <div class="tab-content" id="productTabsContent">
                                <!-- description tab -->
                                <div class="tab-pane fade show active" id="description" role="tabpanel">
                                    <div class="product-description">
                                        <?php the_content(); ?>
                                    </div>
                                </div>
                                
                                <!-- additional information tab -->
                                <div class="tab-pane fade" id="additional" role="tabpanel">
                                    <div class="product-additional">
                                        <?php wc_display_product_attributes($product); ?>
                                    </div>
                                </div>
                                
                                <!-- reviews tab -->
                                <div class="tab-pane fade" id="reviews" role="tabpanel">
                                    <div class="product-reviews">
                                        <?php comments_template(); ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        <?php endwhile; ?>
    </div>
</section>
<!-- product-template end -->

<!-- related products -->
<section class="related-products">
    <div class="container">
        <div class="related-products-area">
            <div class="section-title">
                <h3>Related Products</h3>
            </div>
            <div class="related-products-grid">
                <?php
                // 获取相关产品
                $related_products = wc_get_related_products($product->get_id(), 4);
                
                if (!empty($related_products)) {
                    echo '<div class="row">';
                    
                    foreach ($related_products as $related_id) {
                        $related_product = wc_get_product($related_id);
                        if ($related_product) {
                            echo '<div class="col-12 col-lg-3 col-md-6 col-sm-6">';
                            echo '<div class="product-item">';
                            
                            // 产品图片
                            $image_id = $related_product->get_image_id();
                            if ($image_id) {
                                $image_url = wp_get_attachment_image_url($image_id, 'medium');
                                echo '<div class="product-img">';
                                echo '<a href="' . get_permalink($related_id) . '">';
                                echo '<img src="' . esc_url($image_url) . '" class="img-fluid" alt="' . esc_attr($related_product->get_name()) . '">';
                                echo '</a>';
                                echo '</div>';
                            }
                            
                            // 产品信息
                            echo '<div class="product-content">';
                            echo '<h6><a href="' . get_permalink($related_id) . '">' . esc_html($related_product->get_name()) . '</a></h6>';
                            echo '<div class="product-price">' . $related_product->get_price_html() . '</div>';
                            echo '<div class="product-action">';
                            echo '<a href="?add-to-cart=' . $related_id . '" class="btn-add-cart">Add to Cart</a>';
                            echo '</div>';
                            echo '</div>';
                            
                            echo '</div>';
                            echo '</div>';
                        }
                    }
                    
                    echo '</div>';
                }
                ?>
            </div>
        </div>
    </div>
</section>

<script>
jQuery(document).ready(function($) {
    // 产品图片滑块同步
    var $mainSlider = $('.product-img-slider');
    var $thumbSlider = $('.product-thumb-slider');
    
    $mainSlider.owlCarousel({
        items: 1,
        nav: true,
        dots: false,
        loop: false,
        onChanged: function(event) {
            $thumbSlider.trigger('to.owl.carousel', [event.item.index, 300]);
        }
    });
    
    $thumbSlider.owlCarousel({
        items: 4,
        nav: false,
        dots: false,
        loop: false,
        responsive: {
            0: { items: 2 },
            576: { items: 3 },
            768: { items: 4 }
        }
    });
    
    // 缩略图点击事件
    $thumbSlider.on('click', '.owl-item', function() {
        var index = $(this).index();
        $mainSlider.trigger('to.owl.carousel', [index, 300]);
    });
});
</script>

<?php get_footer(); ?>